<template>
  <div>
    <div id="myChart" :style="{width: '100%', height: '500%'}"></div>
    <img src='../test/11.svg'>
    <img src='../test/1.svg' alt="">
    <img src='../test/2.svg' alt="">
    <img src='../test/3.svg' alt="">
    <img src='../test/4.svg' alt="">
    <img src='../test/5.svg' alt="">
    <model-obj src="/static/img/taideng.obj" mtl="/static/img/taideng.mtl"></model-obj>
  </div>
</template>
<script>
  export default {
    mounted () {
      this.drawLine()
    },
    data () {
      return {
        redisData: [],
        total: [],  // 存入60秒数据
        timer: null
      }
    },
    // 关闭(销毁)当前组件时候一定会调用的方法
    beforeDestroy () {  //清除定时器
      clearInterval(this.timer)
    },
    activated () {
      this.refreshList()
    },
    methods: {
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['炼焦']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.total
    },
    yAxis: {
        type: 'value',
        min: function (value) {
                        return value.min;
                    }
    },
    series: [
        {
            name: '炼焦',
            type: 'line',
            stack: '总量',
            data: this.redisData
        }
        // {
        //     name: '联盟广告',
        //     type: 'line',
        //     stack: '总量',
        //     data: [220, 182, 191, 234, 290, 330, 310]
        // },
        // {
        //     name: '视频广告',
        //     type: 'line',
        //     stack: '总量',
        //     data: [150, 232, 201, 154, 190, 330, 410]
        // },
        // {
        //     name: '直接访问',
        //     type: 'line',
        //     stack: '总量',
        //     data: [320, 332, 301, 334, 390, 330, 320]
        // },
        // {
        //     name: '搜索引擎',
        //     type: 'line',
        //     stack: '总量',
        //     data: [820, 932, 901, 934, 1290, 1330, 1320]
        // }
    ]
})
        //鼠标事件
        myChart.on('click', function (params) {
          console.log(params)
        })
      },
      refreshList () {
        var a = 0
        this.timer = setInterval(() => {
          setTimeout(() => {
            this.$http({
              url: '/test/one/leaveForm/redis',
              method: 'get'
            }).then(({
              data
            }) => {
              if (data && data.success) {
                this.redisData[a] = data.redis[0]
                this.total[a] = a
                this.drawLine()
                  a++
              }
            })
          })
        }, 1000)
      }
    }
  }
</script>

<style scoped>
  .box {
    margin-top: 50px;
  }
</style>
